<template>
    <div id="nav">
        <van-tabbar route>
            <van-tabbar-item replace to="/" icon="home-o">
                <span class="title">首页</span>
                <!--
                    作用域插槽和具名插槽的合写。
                 -->
                <template #icon="props">
                    <!-- <svg class="icon" aria-hidden="true">
                        <use :xlink:href="props.active?'#icon-home-sel':'#icon-home'"></use>
                    </svg> -->
                    <geek-icon :name="props.active?'home-sel':'home'"></geek-icon>
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/question" icon="friends-o">
                  <span class="title">问答</span>
                  <template #icon="props">
                    <!-- <svg class="icon" aria-hidden="true">
                        <use :xlink:href="props.active?'#icon-qa-sel':'#icon-qa'"></use>
                    </svg> -->
                    <geek-icon :name="props.active?'qa-sel':'qa'"></geek-icon>
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/video" icon="shopping-cart-o">
                <span class="title">视频</span>
                <template #icon="props">
                    <!-- <svg class="icon" aria-hidden="true">
                        <use :xlink:href="props.active?'#icon-video-sel':'#icon-video'"></use>
                    </svg> -->
                    <geek-icon :name="props.active?'video-sel':'video'"></geek-icon>
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/mine" icon="search">
                <span class="title">我的</span>
                <template #icon="props">
                    <!-- <svg class="icon" aria-hidden="true">
                        <use :xlink:href="props.active?'#icon-mine-sel':'#icon-mine'"></use>
                    </svg> -->
                    <geek-icon :name="props.active?'mine-sel':'mine'"></geek-icon>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {

}
</script>

<style scoped lang="less">
/* 固定样式 不要修改 */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

// .title {
//     color: @geek-gray-color;
// }

// 这个样式是vantUI自带的样式
/deep/ .van-tabbar-item--active .title{
    color: @geek-color;
}
</style>
